<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
     <div>
        <div class="wizard-steps">
			<div class="completed-step"><a href="#"><span>1</span> Applicant Info</a></div>
			<div class="completed-step"><a href="#"><span>2</span> Employment Info</a></div>
			<div class="completed-step"><a href="#"><span>3</span> Vehicle Info</a></div>
			<div class="completed-step"><a href="#"><span>4</span> Financial Info</a></div>
			<div class="active-step"><a href="#"><span>5</span> TradeIn Info</a></div>
			<div><a href="#"><span>6</span> Confirmation</a></div>
		</div>
        <h:panelGrid rowClasses="s1row" columns="6" columnClasses="rightAlign col-padding, leftAlign col-padding, 
	    	rightAlign col-padding, leftAlign col-padding, rightAlign col-padding, leftAlign col-padding" width="100%">
	    	
	    	<h:outputText value="Trade Make:" />
	        <h:selectOneListbox value="#{lnCtrl.loanApp.tradeinInfos[0].make}" label="Trade Make"  size="1" converter="entityConverter">
	        	<f:selectItems value="#{invCtrl.makes}"/>
	        	<f:param name="entityName" value="Make"/>
	        </h:selectOneListbox>
	        
	        <h:outputText value="Trade Model:" />
	        <h:selectOneListbox value="#{lnCtrl.loanApp.tradeinInfos[0].model}" label="Trade Model"  size="1" converter="entityConverter">
	        	<f:selectItems value="#{invCtrl.models}"/>
	        	<f:param name="entityName" value="Model"/>
	        </h:selectOneListbox>
	        
	        <h:outputText value="Trade Style:" />
	        <h:selectOneListbox value="#{lnCtrl.loanApp.tradeinInfos[0].style}" label="Trade Style"  size="1" converter="entityConverter">
	        	<f:selectItems value="#{invCtrl.styles}"/>
	        	<f:param name="entityName" value="Style"/>
	        </h:selectOneListbox>
	        
	        <h:outputText value="Trade Year:" />
	        <h:inputText value="#{lnCtrl.loanApp.tradeinInfos[0].year}" label="Trade Year"  />
	        
	        <h:outputText value="Trade Color:" />
	        <h:inputText  value="#{lnCtrl.loanApp.tradeinInfos[0].color}" label="Trade Color"  />
	        
	        <h:outputText value="Trade Mileage:" />
	        <h:inputText   value="#{lnCtrl.loanApp.tradeinInfos[0].mileage}"  label="Trade Mileage"/> 
	        
	        <h:outputText value="Trade VIN:" />
	        <h:inputText   value="#{lnCtrl.loanApp.tradeinInfos[0].vin}"  label="Trade VIN"   />
	         
	        <h:outputText value="Trade PayOff:" />
	        <h:inputText   value="#{lnCtrl.loanApp.tradeinInfos[0].payoffAmount}"  label="Trade PayOff"/>
	        
	        <h:outputText value="Trade PayOff Thru:" />
	        <rich:calendar value="#{lnCtrl.loanApp.tradeinInfos[0].payoffThruDate}"
                popup="true" datePattern="MM/dd/yyyy" label="Trade PayOff Thru"
                cellWidth="24px" cellHeight="22px" style="width:200px"
                disabled="false">
            </rich:calendar>
	        
	        <h:outputText value="LienHolder Address1:" />
	        <h:inputText   value="#{lnCtrl.loanApp.tradeinInfos[0].lienHolderAdd1}"  label="LienHolder Address1" /> 
	        
	        <h:outputText value="LienHolder Address2:" />
	        <h:inputText  value="#{lnCtrl.loanApp.tradeinInfos[0].lienHolderAdd2}" label="LienHolder Address2"  />
	        
	        <h:outputText value="LienHolder City:" />
	        <h:inputText  value="#{lnCtrl.loanApp.tradeinInfos[0].lienHolderCity}" label="LienHolder City"  />
	        
	        <h:outputText value="LienHolder State:" />
	        <h:inputText  value="#{lnCtrl.loanApp.tradeinInfos[0].lienHolderState}" label="LienHolder State"  />
	        
	        <h:outputText value="LienHolder Zip:" />
	        <h:inputText  value="#{lnCtrl.loanApp.tradeinInfos[0].lienHolderZip}" label="Zip"  />
	    </h:panelGrid>
	    <div class="navPanel">
	    	<a4j:commandButton value="&lt;&lt;Previous" styleClass="button1 alignright" immediate="true">
	            <rich:toggleControl targetItem="@prev" event="click" />
	        </a4j:commandButton>
	        <a4j:commandButton styleClass="fright button1" value="Next &gt;&gt;">
	            <rich:toggleControl targetItem="@next" event="click"/>
	        </a4j:commandButton>
	    </div>
	</div>    
</ui:composition>